<template>
  <div class="myTitle center">
    <div class="name_desc">
      <span class="name">{{ name }}</span
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <span class="desc">{{ desc }}</span>
    </div>
    <div class="cent"><slot name="center"></slot></div>
    <div class="button"><slot name="button"></slot></div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
export default {
  props: {
    name: {
      type: String,
      default: "",
    },
    desc: {
      type: String,
      default: "",
    },
  },
  name: "myTitle",
  setup(props, ctx) {
    /* 定义仓库 */
    const store = useStore();
    /* 定义路由传参 */
    const router = useRouter();
    /* 定义路由收参 */
    const route = useRoute();
    /* 定义总数据存放地址 */
    const data = reactive({});
    return { ...toRefs(data) };
  },
  components: {},
};
</script>
<style lang="scss" scoped>
/* 如果不想样式污染  就加个scoped */
.myTitle {
  padding: 40px 0;
  display: flex;
  align-items: center;
  position: relative;
  .name_desc {
    flex: 1;
    .name {
      font-size: 30px;
    }
    .desc {
      font-size: 14px;
      color: #999999;
    }
  }
}
</style>